<template>
    <div>
        <el-tabs type="border-card">
             
            <el-tab-pane label="商品管理">
                <!-- <router-link to="/goodsManage">
                    商品管理
                </router-link> -->
                <goodsManagePage :goodsList="goodsList" :groupsList="groupsList"></goodsManagePage>
            </el-tab-pane>

            <el-tab-pane label="分组管理">            
                <!-- <router-link to="/groupManage">
                    分组管理
                </router-link> -->
                <groupManagePage :groupsList="groupsList" :goodsList="goodsList"></groupManagePage>
            </el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>
<script>
import goodsManagePage from '@/components/page/Goods/GoodsManage.vue'
import groupManagePage from '@/components/page/Groups/GroupManage.vue'

// 引入LeanCloud存储
var AV = require('leancloud-storage');

import Goods from '../../../models/Goods.js'
import Groups from '../../../models/Groups.js'
import util from '../../common/util.js'

export default {
  data() {
    return {
      goodsList:[
        //   {id:1,title:'小鸡炖蘑菇',type_id:1,imgurl:'https://img.yzcdn.cn/upload_files/2018/09/10/Fk9O8KkvogL6tcNxyPzeK78RYkv0.png?imageView2/2/w/120/h/120/q/90/format/webp',desc:'是一种很好吃的菜品哦',price:20},
        //   {id:2,title:'小鸡炖火锅',type_id:1,imgurl:'https://img.yzcdn.cn/upload_files/2018/09/10/Fk9O8KkvogL6tcNxyPzeK78RYkv0.png?imageView2/2/w/120/h/120/q/90/format/webp',desc:'是一种很好吃的菜品哦',price:20}
      ],
      groupsList:[
        //   {
        //   id:1,
        //   name: "主菜1111",
        //   amount: 1
        // },
        // {
        //     id:2,
        //   name: "热菜",
        //   amount: 1
        // },
        // {
        //     id:3,
        //   name: "冷菜",
        //   amount: 1
        // },
        // {
        //     id:4,
        //   name: "饮料",
        //   amount: 1
        // }
        ],
        shop_id : localStorage.getItem('shop_id'), //店铺ID

    };
  },
  mounted(){
        // 加载之后获取商品和类别数据
        let query_Goods = new AV.Query('Goods')
        let query_Groups = new AV.Query('Groups')

        let shop = AV.Object.createWithoutData('Seller',this.shop_id)
        
        query_Goods.equalTo('shopId',shop)
        query_Goods.find().then(goods=>{
            console.table(goods)

            this.goodsList = goods
        })

        query_Groups.equalTo('shopId',shop)
        query_Groups.find().then(groups=>{
            console.table(groups)

            this.groupsList = groups
        })
  },
  methods:{
      createNewGood(){
            this.$router.push({name:'newGoods',params:{id:1}})
      },
      createNewGroup(){
          this.$prompt('请输入分组名称', '新建分组', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {

            //创建分组
            this.tableData.push({
                name:value,
                amount:0
            })
          this.$message({
            type: 'success',
            message: `新建分组: ${value} 成功!`
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      deleteGroup(id){
        //   console.log(id)
        //   this.$message('id'+id.row.id)
        // debugger;
            let tindex = -1;
            for (let index = 0; index < this.tableData.length; index++) {
                if(this.tableData[index].id === id.row.id){
                    tindex = index;
                }            
            }
            if(tindex!=-1){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    

                    // this.tableData[id.row.id]
                    this.tableData.splice(tindex,1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }else
            {
                this.$message({
                        type: 'warning',
                        message: '未找到该记录'
                    }); 
            }
          
      },
      deleteGoods(id){
          this.$message("删除商品")
      },
      soldOut(){
           this.$message("下架")
      },
      putaway(){
          this.$message("上架")
      },
      handleSelectionChange(){

      }

  },
  components:{
      goodsManagePage,groupManagePage
  }
};
</script>

<style lang="scss" scoped>

.image{
    width: 100px;
    display: block;
}
.price{
    color: red;
}
.button{
    float:right;
    margin-left:5px;

    padding:5px;
}
</style>

